<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主轴学习一</title>
    <style>
        .box{
            width: 600px;
            height: 500px;
            border: #888888 1px solid;
            display: flex;
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            flex-wrap: wrap-reverse;
        }
        .box1{
            width: 90px;
            height: 150px;
            border: black 1px solid;
        }
        .box2{
            width: 100px;
            height: 200px;
            border: black 1px solid;
        }
        .box3{
            width: 110px;
            height: 100px;
            border: black 1px solid;
        }
    </style>
</head>
<body>
<!--
        主轴: 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是:从左到右(左边是起点，右边是终点)
        侧轴:与主铂垂直的就想侧铀，侧铀默认是垂直的，默认方向量:从上到下(上边是起点，下边是终点)。
        主轴方向:
            属性名:flex-direction
            常用值如下:
                1.row :主轴方向水平从左到右-- 默认伯
                2.row-reverse :主轴方向水平从右到左
                3 column:主轴方向垂直从上到下。
                4、column-reverse:丰轴方向率直从下到上
        注意:改变了主轴的方向，侧铀方向也随之改变。
            主轴换行方式:
                属性名:flex-wrap
                常用值如下:
                    1.nowrap:不换行--默认值
                    2.wrap:换行
                    3.wrap-reverse:换行，但侧轴方向不变。
        复合属性:
            f1ex-f1ow是一个复合属件，复合了 f1ex-direction 和 flex-wrap 两个属性。值没有顺序要求。
            flex-flow: row wrap;
-->
        <div class="box">
            <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div>
        </div>
</body>
</html>